<template>
    <a-card title="调色板">
        <div style="display: flex; gap: 1rem;">
            <div style="width: 260px">
                <div style="height: 450px;">
                    <a-color-picker v-model="mainColor" size="large"  :trigger-props="{popupVisible: true}" :disabled-alpha="true">
                        <div class="colorShow" :style="{backgroundColor: mainColor}" @drop="dropChangeColor" @dragover="dragOver" @dragstart="dragStart" draggable="true" ></div>
                    </a-color-picker>
                </div>
                <div class="colorCodeBox">
                    <div class="colorCode" v-for="(color, index) in mainColorCodes" :key="index">
                        <span>{{color.name}}: {{ color.value }}</span>
                        <a-button type="text" @click="copy(color.value)">
                            <template #icon>
                                <Icon size="1.5rem"><Copy16Filled/></Icon>
                            </template>
                        </a-button>
                    </div>
                </div>
            </div>

            <div >
                <div style="margin-bottom:1rem;">
                    <a-button type="secondary" @click="addColor" long>
                        <Icon><ArrowUp16Filled/></Icon>
                        添加到色板
                    </a-button>
                </div>
                <div style="display: flex; gap: 0.5rem;">
                    <div class="colorCol">
                        <div v-for="(color, index) in brightList" :key="index" class="colorColItem">
                            <div class="sColorBox":style="{backgroundColor: color}"  @dragstart="dragStart2" draggable="true" :color="color" > </div>
                            <span>{{color}}</span>
                        </div>
                        <span> 亮度 </span>
                    </div>
                    <div class="colorCol">
                        <div v-for="(color, index) in phaseList" :key="index" class="colorColItem">
                            <div class="sColorBox" :style="{backgroundColor: color}"
                            @dragstart="dragStart2" draggable="true" :color="color" > </div>
                            <span>{{color}}</span>
                        </div>
                        <span> 色相 </span>
                    </div>
                </div>
            </div>
        </div>
    </a-card>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { hex2grb1, hex2hsv, hex2rgb2, copy, adjust_brightness, phase_color } from '../api';
import { Copy16Filled, ArrowUp16Filled } from '@vicons/fluent';
import { Icon } from '@vicons/utils';


const mainColor = ref("#888888");

const mainColorCodes = computed(()=>{
    return [
        {name: "HEX", value: mainColor.value},
        {name: "RGB", value: hex2rgb2(mainColor.value)},
        {name: "RGB", value: hex2grb1(mainColor.value)},
        {name: "HSV", value: hex2hsv(mainColor.value)}
    ]
})

const brightList = computed(()=>{
    // 亮度从0.2到0.8
    const res: string[] = [];
    for(let i = 5; i < 20; i+=2){
        res.push(adjust_brightness(mainColor.value, i * 0.1));
    }
    return res;
})

const phaseList = computed(()=>{
    const res: string[] = [];
    for(let i = 0; i < 360; i+=45){
        res.push(phase_color(mainColor.value, i/360));
    }
    return res;
})

const setColor = (color: string) => {
    mainColor.value = color;
}

const emit = defineEmits(['add']);

const addColor = () => {
    emit('add', mainColor.value);
}

// 拖动
const dragStart = (e: DragEvent) => {
    e.dataTransfer?.setData('color', mainColor.value);
};

const dragOver = (e: DragEvent) => {
    e.preventDefault();
};

const dropChangeColor = (e: DragEvent) => {
    e.preventDefault();
    const c = e.dataTransfer?.getData('color');
    if(c){
        mainColor.value = c;
    }
};

const dragStart2 = (e: DragEvent) => {
    e.dataTransfer?.setData('color', e.target.attributes.color.value);
};

</script>

<style scoped>

.colorShow{
    width: 260px;
    height: 150px;
    cursor:grab;
}
.colorCode{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    font-size: 1rem;
    background-color: var(--color-fill-2);
    border-radius: 10px;
}
.colorCodeBox{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sColorBox{
    width: 70px;
    height: 40px;
    border-radius: 3px;
}
.colorCol{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.colorColItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
}
.colorColItem div {
    cursor: grab;
}
</style>